<template>
  <div class="spl-container">
    <breadcrumb :data="pathData"></breadcrumb>
    <div class="emp-container">
      <div class="emp-title">
        <i class="ic-money mr-10"></i>账户余额 <span class="text-orange ml-5 mr-5 fw-blod" v-text="'¥'+balanceAmount"></span>元
        <router-link to="/recharge">
          <el-button type="primary" class="opt-btn orange-btn ml-60 s-btn" >充值</el-button>
        </router-link>
      </div>
      <div class="search-row m-form mt-15">
        <el-date-picker
          v-model="beginYearMonth"
          type="date" value-format="yyyy-MM-dd" class="label-sel">
        </el-date-picker>
        <span class="ml-10 mr-10">~</span>
        <el-date-picker
          v-model="endYearMonth"
          type="date" value-format="yyyy-MM-dd" class="label-sel">
        </el-date-picker>

        <label class="label-text ml-60">交易类型:</label>
        <el-select placeholder="请选择" class="label-sel ml-10" v-model="search.type">
          <el-option label="收入" value="1"></el-option>
          <el-option label="支出" value="0"></el-option>
        </el-select>
        <el-button type="primary" class="opt-btn ml-20 s-btn" icon="icon el-icon-search" @click="getTableData">查询</el-button>

      </div>

      <dTable @fetch="getTableData" ref="empTable" :tableHeight="tableHeight">
        <el-table-column prop="createTime" label="发生日期" width="250" header-align="center" align="center" :formatter="formatDateFun"></el-table-column>
        <el-table-column prop="tradeType" label="交易类型" width="220" header-align="center" align="left"></el-table-column>
        <el-table-column prop="amount" label="金额" width="220" header-align="center" align="right"></el-table-column>
        <el-table-column prop="balanceAmount" label="余额" width="220" header-align="center" align="right"></el-table-column>
        <el-table-column prop="comment" label="备注" header-align="center" align="left"></el-table-column>
        <template slot="pagination-btns">
          <el-button type="primary" class="opt-btn s-btn" icon="ic-export" @click="exportData">导出</el-button>
        </template>
      </dTable>
    </div>
  </div>
</template>
<script>
import dTable from '../../components/common/table'
import treeSelect from '../../components/common/treeSelect'
export default {
  components: { dTable, treeSelect },
  data () {
    return {
      // 导航
      pathData: [
        { name: '财务' },
        { name: '账户明细', path: '/accountDetails' }
      ],
      beginYearMonth: '',
      endYearMonth: '',
      search: {
        type: ''
      },
      dateType: '2',
      accountId: '',
      balanceAmount: '0'
    }
  },
  created () {
    this.$nextTick(() => {
      this.getAccountBalanceAmount()
    })
  },
  computed: {
    tableHeight: function () {
      return this.$global.bodyHeight - 280 + 'px'
    }
  },
  methods: {
    formatDateFun (row, column, cellValue, index) {
      return cellValue == null ? '-' : this.$global.dateToStrByFormart(cellValue,'yyyy-MM-dd HH:mm')
    },
    getAccountBalanceAmount (){
      this.$http({
        url:'/account/fetchAccount',
        method: 'get',
        params: {

        }
      }).then(({data}) => {
        this.accountId = data.id
        this.balanceAmount = data.totalBalanceAmount
        this.getTableData()
      })
    },
    getTableData (params = []) {
      params =
          [
            { property: 'dateType', value: this.dateType },
            { property: 'tradeType', value: this.search.type },
            { property: 'startDate', value: this.beginYearMonth },
            { property: 'endDate', value: this.endYearMonth },
            { property: 'accountId', value: this.accountId }
          ]
      this.$refs.empTable.fetch(params, 'post', '/account/fetchPageList')
      this.drawer = false // 关闭更多筛选
    },
    //导出
    exportData(){
      var requestParams = this.$refs.empTable.requestParams;
      delete requestParams.page
      delete requestParams.size
      this.$downloadFile('/account/export/dataList', 'post', requestParams, this.$global.EXCEL, '账户明细');
    }
  }
}
</script>
<style lang="less" scoped>
  .emp-container {
    padding: 20px;
    position: relative;
    height: 100%;
  }
</style>
